<template>
	<div ref="map" class="lexmis-Amap"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

const load=AMapLoader.load({
	key:'51e644b4d193536092a37dea04f5db8b',
	version:'1.4.15',
	plugins:[],
});
export default {
	name:'Amap',
	props:{
		showButton:{
			type:Boolean,
			default:true,
		},
	},
	created(){
		this.ready=new Promise((resolve) => {
			this.resolve=resolve;
		});
	},
	async mounted(){
		const AMap=await load;
		this.resolve(new Promise((resolve) => {
			this.map=new AMap.Map(this.$refs.map,{
				resizeEnable:true,
			});
			//点击地图
			// this.map.on('click',(e) => {
			// 	const lnglat=e.lnglat;
			// 	this.marker(lnglat.getLng(),lnglat.getLat());
			// });
			AMap.plugin(['AMap.Geolocation','AMap.PlaceSearch','AMap.Geocoder'],() => {
				this.geolocation=new AMap.Geolocation({
					enableHighAccuracy:true,
					timeout:1000,
					buttonPosition:'RB',
					buttonOffset:new AMap.Pixel(10,10),
					panToLocation:true,
					zoomToAccuracy:true,
					showButton:this.showButton,
				});
				this.map.addControl(this.geolocation);
				this.placeSearch=new AMap.PlaceSearch({
					// map:this.map,
					// autoFitView:true,
					extensions:'all',
				});
				this.placeSearch.on('markerClick',(e) => {
					this.$emit('click-search',e.index);
				});
				this.geocoder=new AMap.Geocoder({
					radius:100,
				});
				resolve();
			});
		}).catch((e) => {
			this.$emit('error',e);
		}));
	},
	methods:{
		//获取当前定位
		async getPosition(panToLocation=true){
			await this.ready;
			return new Promise((resolve,reject) => {
				this.geolocation.getCurrentPosition((status,result) => {
					if(status==='complete'){
						if(!panToLocation){
							this.geolocation.options.panToLocation=false;
							this.geolocation.options.zoomToAccuracy=false;
						}
						resolve(result);
					}else{
						this.$emit('error',result.message);
						reject(new Error(result.message));
					}
				});
			}).finally(() => {
				this.geolocation.options.panToLocation=true;
				this.geolocation.options.zoomToAccuracy=true;
			});
		},
		//在附近搜索
		async search(name,pageIndex=1,pageSize=20,radius=100){
			const AMap=await load;
			const {position:{lng,lat}}=await this.getPosition(false);
			this.placeSearch.setPageIndex(pageIndex);
			this.placeSearch.setPageSize(pageSize);
			return new Promise((resolve,reject) => {
				this.placeSearch.searchNearBy(name,new AMap.LngLat(lng,lat),radius,(status,result) => {
					if(status==='complete'||status==='no_data'){
						resolve(result.poiList);
					}else{
						this.$emit('error',result);
						reject(new Error(result));
					}
				});
			});
		},
		//标记一些点
		async setPoints(points,lng='lng',lat='lat'){
			await this.ready;
			const AMap=await load;
			const map=this.map;
			map.clearMap();
			const markers=points.map(function(point,i){
				const curPoint=new AMap.Marker({
					content:'<div class="amap_lib_placeSearch_poi">'+(i+1)+'</div>',
					position:new AMap.LngLat(point[lng],point[lat]),
				});
				curPoint.setMap(map);
				return curPoint;
			});
			map.setFitView(markers);
		},
		//清空点标记
		async clearMarker(){
			await this.ready;
			for(const marker of this.map.getAllOverlays('marker')){
				this.map.remove(marker);
			}
		},
		//标记一个点
		async marker(lng,lat){
			const AMap=await load;
			await this.clearMarker();
			const point=new AMap.Marker({
				content:'<div class="amap_lib_placeSearch_poi"></div>',
				position:new AMap.LngLat(lng,lat),
			});
			point.setMap(this.map);
			this.map.setFitView(point);
		},
		//通过经纬度获取地址
		async getAddress(lng,lat){
			await this.ready;
			const AMap=await load;
			return new Promise((resolve,reject) => {
				this.geocoder.getAddress(new AMap.LngLat(lng,lat),(status,result) => {
					if(status==='complete'&&result.regeocode){
						resolve(result.regeocode);
					}else{
						this.$emit('error',result);
						reject(new Error(result));
					}
				});
			});
		},
	}
};
</script>

<style lang="scss">
.lexmis-Amap{
	.amap_lib_placeSearch_poi{
		background:url(https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png) no-repeat;
		height:31px;
		width:19px;
		cursor:pointer;
		left:-1px;
		text-align:center;
		color:#fff;
		font:12px arial, simsun, sans-serif;
		padding-top:3px;
	}
	.amap-logo,.amap-copyright{
		display:none !important;
	}
}
</style>
